<template>
  <div class="login-container">
    <el-form :model="form" :rules="rules"
             status-icon
             ref="form"
             label-position="left"
             label-width="120px"
             class="demo-ruleForm login-page">
      <h3 class="title">修改密码</h3>
      <el-form-item prop="password" label="新密码">
        <el-input type="password"
                  v-model="form.password"
                  auto-complete="off"
                  placeholder="请输入密码"
                  show-password
        ></el-input>
      </el-form-item>
      <el-form-item prop="rePassword" label="再次输入">
        <el-input type="password"
                  v-model="form.rePassword"
                  auto-complete="off"
                  placeholder="请输入密码"
                  show-password
        ></el-input>
      </el-form-item>
<!--      <el-form-item style="width:100%;">-->
        <el-button type="primary" style="width:100%;" @click="handleSubmit">确认修改</el-button>
<!--      </el-form-item>-->
    </el-form>
  </div>
</template>

<script>
import { put } from "@/plugins/axios"
import { Message } from "element-ui"

export default {
  name: 'changePassword',
  data(){
    const module = '/user'
    const check = (rule, value, callback) => {
      if (this.form.password === this.form.rePassword) {
        callback()
      } else {
        callback(new Error('两次输入密码不一致'))
      }
    }
    return {
      uri: {
        changePassword: module + '/changePassword'
      },
      form: {
        id: this.$store.getters.GET_ACCOUNT.id,
        password: '',
        rePassword: '',
      },
      rules: {
        password: [{required: true, message: '请输入新密码', trigger: 'blur'}],
        rePassword: [
          {required: true, message: '请确认密码', trigger: 'blur'},
          {validator: check, trigger: 'blur'}
        ]
      },
      checked: false
    }
  },
  methods: {
    handleSubmit(){
      this.$refs.form.validate((valid) => {
        if(valid){
          put(this.uri.changePassword, this.form, response => {
            if (response.code === 200) {
              Message.success(response.message)
              this.$router.push({path: '/'});
            }
          })
        }else{
          return false;
        }
      })
    }
  }
};
</script>

<style scoped lang="less">
.login-container {
  width: 100%;
  height: 100%;
  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    label.el-checkbox.rememberme {
      margin: 0px 0px 15px;
      text-align: left;
    }
  }
}
</style>